import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Controls.impl 2.14
import QtGraphicalEffects 1.14

// 折叠面板 (提供折叠尺寸、动画功能，需要自定义Header和Content来实现自定义功能

Item {

    id: root



    // public ================================================================
    function changeCollapsedState(state){
        collapsed = state
    }
    function turnCollapsedState(){
        collapsed = !collapsed
    }

    property bool collapsed: true

    property var header: Rectangle{
        height: 50*dp
        width: 400*dp
        color: "#99AAFF"
        MouseArea{
            anchors.fill: parent
            onClicked: {
                turnCollapsedState()
            }
        }
    }
    property var content: Rectangle{
        height: 200*dp
        width: 400*dp
        color: "#FFAA99"

    }

    // private ================================================================

    clip: true

    Control{
        id: control_content
        height: contentItem.height
        width: contentItem.width
        y: header.height
        contentItem: content
        clip: true

        state: collapsed ? "hideState" : "showState"

        // 过渡效果
        states:[
            State {
                name: "showState"
                PropertyChanges {
                    target: control_content
                    y: header.height
                }
            },
            State {
                name: "hideState"
                PropertyChanges {
                    target: control_content
                    y: -content.height
                }
            }
        ]
        transitions: [
            Transition {
                from: "showState"
                to: "hideState"
                NumberAnimation {
                    target: control_content
                    property: "y"
                    duration: 200
                    easing.type: Easing.InOutQuad
                }
            },Transition {
                from: "hideState"
                to: "showState"
                NumberAnimation {
                    target: control_content
                    property: "y"
                    duration: 200
                    easing.type: Easing.InOutQuad
                }
            }
        ]
    }
    Control{
        id: control_header
        height: contentItem.height
        width: contentItem.width
        contentItem: header
        z: 1
    }

    state: collapsed ? "hidePannel" : "showPannel"

//    width: Math.max(header.width, content.width)
    width: 400*dp

    // 过渡效果
    states:[
        State {
            name: "showPannel"
            PropertyChanges {
                target: root
                height: header.height + content.height
            }
        },
        State {
            name: "hidePannel"
            PropertyChanges {
                target: root
                height: header.height
            }
        }
    ]
    transitions: [
        Transition {
            from: "showPannel"
            to: "hidePannel"
            NumberAnimation {
                property: "height"
                duration: 200
                easing.type: Easing.InOutQuad
            }
        },Transition {
            from: "hidePannel"
            to: "showPannel"
            NumberAnimation {
                property: "height"
                duration: 200
                easing.type: Easing.InOutQuad
            }
        }
    ]



}
